
import React, { useState } from 'react'
import { Form, Input, Row, Col, Button, Select, DatePicker, ConfigProvider, Radio } from 'antd';
//中文语言包
import zhCN from 'antd/lib/locale/zh_CN';
//导入图标
import { ZoomOutOutlined, ZoomInOutlined } from '@ant-design/icons';
import '../css/Newaftersalessearch.css'

export default function Newaftersalessearch() {
    const [formLayout] = useState('horizontal');
    const { RangePicker } = DatePicker;
    // 是否显示高级搜索
    const [isHighSearch, setIsHighSearch] = useState(true)
    // 显示隐藏表单
    const showHiddenForm = () => {
        setIsHighSearch(!isHighSearch)
    }
    const formItemLayout =
        formLayout === 'horizontal'
            ? {
                labelCol: {
                    span: 5,
                },
                wrapperCol: {
                    span: 13,
                },
            }
            : null;
    return (
        <div>
            {
                isHighSearch ?
                    (
                        <ConfigProvider locale={zhCN} >
                            <Form {...formItemLayout} >
                                <Row justify='center' className='search-box'>
                                    <Col span={8}>
                                        <Form.Item label="编号" labelCol={{ span: 7 }} labelAlign={'right'} className='.col-box-item' >
                                            <Input placeholder="" />
                                        </Form.Item>
                                        <Form.Item label="职位" labelCol={{ span: 7 }}  >
                                            <Select placeholder="请选择" className='input-size' >
                                                <Select.Option value="请选择">请选择</Select.Option>
                                                <Select.Option value="老板">老板</Select.Option>
                                                <Select.Option value="董事长">董事长</Select.Option>
                                                <Select.Option value="负责人">负责人</Select.Option>
                                                <Select.Option value="业务员">业务员</Select.Option>
                                                <Select.Option value="技术员">技术员</Select.Option>
                                                <Select.Option value="未知">未知</Select.Option>
                                            </Select>
                                        </Form.Item>
                                        <Form.Item label="网址" labelCol={{ span: 7 }} labelAlign={'right'} className='.col-box-item' >
                                            <Input placeholder="" />
                                        </Form.Item>
                                        <Form.Item label="最后更新" labelCol={{ span: 7 }} >
                                            <RangePicker className='input3-size'/>
                                        </Form.Item>
                                        <Form.Item label="详细地址" labelCol={{ span: 7 }} labelAlign={'right'} className='.col-box-item' >
                                            <Input placeholder="" />
                                        </Form.Item>
                                        <Form.Item label="预留字段2" labelCol={{ span: 7 }} labelAlign={'right'} className='.col-box-item' >
                                            <Input placeholder="" />
                                        </Form.Item>
                                        <Form.Item label="客户类型" labelCol={{ span: 7 }} >
                                            <Select placeholder="请选择" className='input-size'>
                                                <Select.Option value="请选择">请选择</Select.Option>
                                                <Select.Option value="已成交">已成交</Select.Option>
                                                <Select.Option value="等待打款">等待打款</Select.Option>
                                                <Select.Option value="确定细节">确定细节</Select.Option>
                                                <Select.Option value="有意向">有意向</Select.Option>
                                                <Select.Option value="销售">销售</Select.Option>
                                            </Select>
                                        </Form.Item>
                                        <Form.Item label="商品类别" labelCol={{ span: 7 }} >
                                            <Select placeholder="请选择" className='input2-size'>
                                                <Select.Option value="请选择">请选择</Select.Option>
                                                <Select.Option value="产品大分类">产品大分类</Select.Option>
                                            </Select>
                                            <Select placeholder="请选择" className='input-size'>
                                                <Select.Option value="请选择">请选择</Select.Option>
                                            </Select>
                                        </Form.Item>
                                        <Form.Item label="业务员" labelCol={{ span: 7 }} >
                                            <Select placeholder="请选择">
                                                <Select.Option value="请选择">请选择</Select.Option>
                                                <Select.Option value="超级管理员">超级管理员</Select.Option>
                                                <Select.Option value="其他">其他</Select.Option>
                                            </Select>
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label="客户名称" labelCol={{ span: 7 }}>
                                            <Input placeholder="" />
                                        </Form.Item>
                                        <Form.Item label="手机号吗" labelCol={{ span: 7 }}>
                                            <Input placeholder="" />
                                        </Form.Item>
                                        <Form.Item label="所属行业" labelCol={{ span: 7 }} >
                                            <Select placeholder="请选择"  className='input2-size'>
                                                <Select.Option value="请选择">请选择</Select.Option>
                                                <Select.Option value="农、林、牧、渔业">农、林、牧、渔业</Select.Option>
                                                <Select.Option value="采矿业">采矿业</Select.Option>
                                                <Select.Option value="制造业">制造业</Select.Option>
                                                <Select.Option value="电力、燃气及水的生产和供应业">电力、燃气及水的生产和供应业</Select.Option>
                                                <Select.Option value="建筑业">建筑业</Select.Option>
                                                <Select.Option value="交通运输、仓储和邮政业">交通运输、仓储和邮政业</Select.Option>
                                                <Select.Option value="金融业">金融业</Select.Option>
                                                <Select.Option value="房地产业">房地产业</Select.Option>
                                                <Select.Option value="教育">教育</Select.Option>
                                            </Select>
                                        </Form.Item>
                                        <Form.Item label="所在地区" labelCol={{ span: 7 }} >
                                            <Select placeholder="请选择" className='input2-size'>
                                                <Select.Option value="请选择">请选择</Select.Option>
                                                <Select.Option value="默认省">默认省</Select.Option>
                                            </Select>
                                            <Select placeholder="请选择"  className='input2-size'>
                                                <Select.Option value="请选择">请选择</Select.Option>
                                            </Select>
                                        </Form.Item>
                                        <Form.Item label="邮编" labelCol={{ span: 7 }}>
                                            <Input placeholder="" />
                                        </Form.Item>
                                        <Form.Item label="预留字段3" labelCol={{ span: 7 }}>
                                            <Input placeholder="" />
                                        </Form.Item>
                                        <Form.Item label="客户级别" labelCol={{ span: 7 }} >
                                            <Select placeholder="请选择"  className='input2-size'>
                                                <Select.Option value="请选择">请选择</Select.Option>
                                                <Select.Option value="一级">一级</Select.Option>
                                                <Select.Option value="二级">二级</Select.Option>
                                                <Select.Option value="三级">三级</Select.Option>
                                            </Select>
                                        </Form.Item>
                                        <Form.Item label="部门" labelCol={{ span: 7 }} >
                                            <Select placeholder="请选择"  className='input2-size'>
                                                <Select.Option value="请选择">请选择</Select.Option>
                                                <Select.Option value="总经办">总经办</Select.Option>
                                                <Select.Option value="财务部">财务部</Select.Option>
                                                <Select.Option value="业务一部">业务一部</Select.Option>
                                                <Select.Option value="财务部">渠道招商部</Select.Option>
                                                <Select.Option value="财务部">营销部</Select.Option>
                                                <Select.Option value="财务部">采购部</Select.Option>
                                                <Select.Option value="财务部">客服部</Select.Option>
                                            </Select>
                                        </Form.Item>
                                        <Form.Item label="自定义字段搜索" labelCol={{ span: 7 }}>
                                            <Input placeholder="" />
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item labelCol={{ span: 6 }} labelAlign={'right'} label="联系人">
                                            <Input placeholder="" />
                                        </Form.Item>
                                        <Form.Item label="电子邮箱" labelCol={{ span: 6 }}>
                                            <Input placeholder="" />
                                        </Form.Item>
                                        <Form.Item label="录入时间" labelCol={{ span: 6 }}>
                                            <RangePicker className='input3-size'/>
                                        </Form.Item>
                                        <Form.Item label="QQ" labelCol={{ span: 6 }}>
                                            <Input placeholder="" />
                                        </Form.Item>
                                        <Form.Item label="预留字段1" labelCol={{ span: 6 }}>
                                            <Input placeholder="" />
                                        </Form.Item>
                                        <Form.Item label="预留字段4" labelCol={{ span: 6 }}>
                                            <Input placeholder="" />
                                        </Form.Item>
                                        <Form.Item label="客户来源" labelCol={{ span: 6 }}>
                                            <Select placeholder="请选择"  className='input2-size'>
                                                <Select.Option value="请选择">请选择</Select.Option>
                                                <Select.Option value="未处理">电话营销</Select.Option>
                                                <Select.Option value="处理中">搜索引擎</Select.Option>
                                                <Select.Option value="已处理">朋友介绍</Select.Option>
                                                <Select.Option value="已处理">其他来源</Select.Option>
                                            </Select>
                                        </Form.Item>
                                        <Form.Item label="录入者" labelCol={{ span: 6 }}>
                                            <Select placeholder="请选择"  className='input2-size'>
                                                <Select.Option value="请选择">请选择</Select.Option>
                                                <Select.Option value="未处理">超级管理员</Select.Option>
                                                <Select.Option value="处理中">其他</Select.Option>
                                            </Select>
                                        </Form.Item>
                                    </Col>
                                    <Col span={16} >
                                        <Form.Item label="其他" labelCol={{ span: 3 }} className='rido'>
                                            <Radio.Group name="radiogroup" defaultValue={1}>
                                                <Radio value={1}>有跟单</Radio>
                                                <Radio value={2}>有订单</Radio>
                                                <Radio value={3}>有合同</Radio>
                                                <Radio value={4}>有售后</Radio>
                                                <Radio value={4}>有附件</Radio>
                                            </Radio.Group>
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}></Col>
                                </Row>
                                <Row className='button-box1'>
                                    <Col span={24} className='btn-box'>
                                        <Button className='btn-box1' size='large' >立即搜索</Button>
                                        <Button className='btn-box2' size='large'>清空条件</Button>
                                    </Col>
                                </Row>
                            </Form>
                        </ConfigProvider>
                    ) : <Row className={'basicSearch'} justify="center" gutter={5}>
                        <Col>
                            <Input placeholder="客户名称 联系人 手机号码" size="small"></Input>
                        </Col>
                        <Col>
                            <Button size="small" style={{ 'backgroundColor': '#2396b2', 'color': '#fff' }} >立即搜索</Button>
                        </Col>
                    </Row>
            }
            <Row>
                <Col span={24} className='btn3-box3'>
                    {/* 切换搜索状态 */}
                    {
                        isHighSearch ?
                            <Button bgcolor="#cc2626" onClick={() => { showHiddenForm() }} className='btn-box3' size='middle'><ZoomOutOutlined />关闭高级搜索</Button> :
                            <Button bgcolor="#cc2626" onClick={() => { showHiddenForm() }} className='btn-box3' size='middle'><ZoomInOutlined />展开高级搜索</Button>
                    }
                </Col>
            </Row>
            {/* 步骤导航 */}
            <Row justify="center" className="addStep">
                <Col>
                    <span className="step">
                        1单击选中客户 {'>>'} 2录入信息
                    </span>
                </Col>
            </Row>
        </div >
    )
}
